<template>
	<div>
		<div id="box"></div>
	</div>
</template>

<script>
	import wangEditor from "wangeditor"

	export default {
		data() {
			return {
				editor: null,
				editorData: '',
			}
		},
		methods: {
			save(){
				// sessionStorage.setItem('defaulttext',this.editor.txt.html())
				this.$message({message:'保存成功',type:'success'})
			},
			getText() {
				// 使用 editor.txt.text() 获取 text 文本
				// this.$message(this.editor.txt.text())
				return this.editor.txt.text()
			},
			gethtml() {
				// editor.txt.html() 获取 html 的值
				// this.$message(this.editor.txt.html())
				return this.editor.txt.html()
			},
			getjson(){
				// 使用 editor.txt.getJSON() 获取 JSON 格式的内容
				console.log(this.editor.txt.getJSON());
			},
			clear() {
				if (confirm('是否清空')) {
					this.editor.txt.clear()
				}
			}
		},
		mounted() {
			const editor = new wangEditor('#box')
			// const editor = new wangEditor('#box','#divbox2')

			// 设置编辑区域高度为 500px 默认为300
			editor.config.height = 500
			// 编辑器 z-index 默认为 10000，可以自行调整
			editor.config.zIndex = 500
			// 自定义 placeholder 的值
			// editor.config.placeholder = '自定义的placeholder'
			// 取消自动 focus
			// editor.config.focus = false
			// 自定义 alert
			// editor.config.customAlert
			// 配置颜色（文字颜色、背景色）
			// editor.config.color = ['#000000', '#eeece0', '#1c487f', '#4d80bf']
			// 菜单栏提示
			editor.config.menuTooltipPosition = 'down'
			// 注意，先配置 height ,再执行 create()
			editor.create()
			this.editor = editor
		}
	}
</script>

<style>
</style>
